<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-form-item">
    <label class="layui-form-label">商品分类</label>
    <div class="layui-input-block">
        <input type="text" name="title" autocomplete="off" class="layui-input" value="保险&nbsp;&gt;&nbsp;牲畜类&nbsp;&gt;&nbsp;奶牛" disabled="disabled" >
        <input type="hidden" name="cat_id" value="180" />
        <input type="hidden" name="type_id" value="64" />
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">商品名称</label>
    <div class="layui-input-block">
        <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入商品名称" class="layui-input"  >
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">商品编号</label>
    <div class="layui-input-block">
        <input type="text" name="sn" lay-verify="required"  autocomplete="off" placeholder="请输入商品编号" class="layui-input"  >
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">是否上架</label>
    <div class="layui-input-block">
        <input type="radio" name="market_enable" value="1" title="是" checked>
        <input type="radio" name="market_enable" value="0" title="否" >
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">市场价格</label>
    <div class="layui-input-block">
        <input type="text" name="mktprice" lay-verify="number" maxlength="9" autocomplete="off" placeholder="请输入市场价格" class="layui-input" >
        <input type="hidden" name="point" value="0" />
    </div>
</div>

<div class="layui-form-item">
    <label class="layui-form-label">详情描述</label>
    <div class="layui-input-block">
        <script id="editor" name="intro" type="text/plain" style="height: 200px; width: 99%;"></script>
        </div>
        </div>

        <script>
        $(function(){
            var ue = UE.getEditor('editor', {
                autoHeightEnabled : false,
                zIndex : 0,
            });
        })
        </script>


        <style>
            .slt .layui-unselect{width: 300px;float:left;}
            .same-unit{float:left;margin:0 0 0 10px;line-height:38px;}
            .w300{width:300px;float:left;}
        </style>


        <div class="layui-form-item">
            <label class="layui-form-label">计价单位</label>
            <div class="layui-input-block">
                <input type="text" name="unit" autocomplete="off" placeholder="请输入计价单位" class="layui-input w300" value="" >
            </div>
        </div>

        <div class="layui-form-item slt">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-block">
                <select name="brand_id" lay-verify="">
                    <option value="">请选择</option>
                    <option value="117"
                    >安信保险</option>
                    <option value="118"
                    >安联保险集团</option>
                    <option value="119"
                    >太平洋保险</option>
                    <option value="120"
                    >华夏保险</option>
                    <option value="121"
                    >新华保险</option>
                    <option value="122"
                    >阳光保险</option>
                    <option value="123"
                    >平安保险</option>
                    <option value="124"
                    >中国人寿</option>
                </select>
            </div>
        </div>



        <input type="hidden" name="groupnames" value="基本信息" />
        <input type="hidden" name="paramnums" value="2" />

        <div class="layui-form-item">
            <input type="hidden" name="paramnames" autocomplete="off" value="险种说明" class="layui-input"  >
            <label class="layui-form-label">险种说明</label>
            <div class="layui-input-block">
                <input type="text" name="paramvalues" autocomplete="off" value="" class="layui-input w300"  >
            </div>
        </div>
        <div class="layui-form-item">
            <input type="hidden" name="paramnames" autocomplete="off" value="被保对象" class="layui-input"  >
            <label class="layui-form-label">被保对象</label>
            <div class="layui-input-block">
                <input type="text" name="paramvalues" autocomplete="off" value="" class="layui-input w300"  >
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">seo标题</label>
            <div class="layui-input-block">
                <input name="page_title" autocomplete="off" value="" class="layui-input w300"  >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">seo关键字</label>
            <div class="layui-input-block">
                <textarea name="meta_keywords" placeholder="请输入内容" class="layui-textarea w300"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">seo描述</label>
            <div class="layui-input-block">
                <textarea name="meta_description" placeholder="请输入内容" class="layui-textarea w300"></textarea>
            </div>
        </div>

        <table >
            <thead>
            <tr>
                <th>是否选择</th>
                <th>标签名称</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <input type="checkbox" lay-ignore name="tag_id" value="1" id="tag_1" />
                </td>
                <td style="text-align: left;">热卖排行</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" lay-ignore name="tag_id" value="4" id="tag_4" />
                </td>
                <td style="text-align: left;">牲畜保险</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" lay-ignore name="tag_id" value="5" id="tag_5" />
                </td>
                <td style="text-align: left;">家畜保险</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" lay-ignore name="tag_id" value="6" id="tag_6" />
                </td>
                <td style="text-align: left;">珠宝箱包</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" lay-ignore name="tag_id" value="7" id="tag_7" />
                </td>
                <td style="text-align: left;">男装、女装</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" lay-ignore name="tag_id" value="8" id="tag_8" />
                </td>
                <td style="text-align: left;">牲畜保险</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" lay-ignore name="tag_id" value="9" id="tag_9" />
                </td>
                <td style="text-align: left;">家畜保险</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" lay-ignore name="tag_id" value="10" id="tag_10" />
                </td>
                <td style="text-align: left;">3楼珠宝、箱包品牌</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" lay-ignore name="tag_id" value="11" id="tag_11" />
                </td>
                <td style="text-align: left;">4楼服装鞋帽品牌</td>
            </tr>
            </tbody>
        </table>

        <script>

            $(function() {

                layui.form().render();
            });

        </script>

        <link type="text/css" rel="stylesheet" href="/shop/admin/css/gallery/album.css"  />
        <script type="text/javascript">
            var showImgs = [];
            var actualImgs = [];

            //上传图片插件配置
            var image_uploader_setting = {
                imageName : "picnames",	// 表单提交时 的name
                subFolder : "/goods",		// 上传目录
                showImgs : showImgs,	//显示的img值数组，不提交。只做显示用
                actualImgs : actualImgs	// 实际的img值数组，会提交
            }
        </script>
        <div id="album_tab" class="form-table albumbox" style="width:800px;" >
            <div id="jquery-ui-src" style="display: none;">
                <script type="text/javascript">
                    $(function () {
                        if(typeof $.widget == 'undefined'){
                            $('#jquery-ui-src').html('<script type="text/javascript" src="/shop/admin/js/upload-js/jquery-ui.min.js"><\/script>')
                        }else {
                            $('#jquery-ui-src').remove();
                        }
                    })
                </script>
            </div>
            <script type="text/javascript" src="/shop/admin/js/upload-js/webuploader.js"></script>
            <div id="flashflashContent_" class="imgbar_wrap" style="position: relative;">
                <ul id="sortable_" class="clearfix img_list img_list_">
                    <li draggable="false" class="first_icon" style="display: none;">
                        <i></i>
                    </li>
                </ul>
                <div class="delete-imgs"></div>
                <div class="upload_wrap">
                    <div class="upload">
                        <div class="localUpload_wrap">
                            <div class="localTitle">上传电脑中图片</div>
                            <div class="localUpload">
                                <div class="imgUpload">
                                    <div id="filePicker_" style="position: relative; width: 96px; height: 90px;"></div>
                                </div>
                                <div style="display: none;" id="maxlength_cover"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function() {
                    var imageSpace;
                    // 兼容代码
                    if (typeof image_uploader_setting_ == "undefined") {
                        imageSpace = image_uploader_setting;
                    } else {
                        // 新增加逻辑, 为一个页面支持多个控件，需要多个配置，用控件名称来区分
                        imageSpace = image_uploader_setting_;
                    }
                    var uploaderName = "";
                    var nowImgs = []; // 记录当前所有的图片
                    var imgId = 1; // 图片id
                    var nowImgNum = 0;
                    var showCoverIcon = false;
                    function createHtml(imageName, actualImg, showImg, fileId) {
                        var img = {
                            id : imgId,
                            actualImg : actualImg,
                            showImg : showImg
                        };
                        nowImgs.push(img);

                        var htmlInput = "<input type=\"hidden\" name=\"" + imageName + "\" value=\"" + actualImg + "\" />";
                        var html = "<li style=\"display: list-item;\" draggable=\"true\" data-index=\"0\" class=\"img_box\">"
                            + "<div style=\"height:120px\"><img height=\"100%\"  src=\"" + showImg + "\"></div>"
                            + "<div class=\"img_cover\"></div>"
                            + "<div class=\"toolbar_wrap\" style=\"display: none;\">"
                            + "<div class=\"opacity\"></div>"
                            + "<div class=\"toolbar\">"
                            + "<a href=\"javascript:;\" style=\"display:none;\" class=\"edit\"></a> <a href=\"javascript:;\""
                            + " class=\"delete delete-image\" fileid=\"" + fileId + "\" imgid=\"" + imgId + "\" fsimg=\"" + actualImg + "\"></a>"
                            + "</div>" + htmlInput + "</div>" + "</li>";
                        $("ul.img_list_" + uploaderName).append(html);

                        if (showCoverIcon) {
                            $(".first_icon").show();
                        }
                        imgId++;
                    }

                    var imageName = imageSpace["imageName"]; // 提交表单时  图片的name
                    var subFolder = imageSpace["subFolder"]; // 上传时 图片的目录
                    var showImgs = imageSpace["showImgs"]; // 需要显示的图片数组（提交表单时不会提交）
                    var actualImgs = imageSpace["actualImgs"]; // 实际图片数组（提交表单时会提交）
                    var fileNumLimit = imageSpace["fileNumLimit"]; // 限制上传数量
                    var fileSizeLimit = imageSpace["fileSizeLimit"]; // 限制上传大小  单位字节
                    showCoverIcon = imageSpace["showCoverIcon"]; // 是否显示封面图标
                    nowImgNum = actualImgs.length;
                    // 没有限制的话 默认限制20张
                    if (!fileNumLimit) {
                        fileNumLimit = 20;
                    }

                    // 没有限制大小的话 默认2M
                    if (!fileSizeLimit) {
                        fileSizeLimit = 1024 * 1024 * 20;
                    }

                    // 循环遍历出已有的图片
                    for ( var i in showImgs) {
                        var showImg = showImgs[i];
                        var actualImg = actualImgs[i];
                        createHtml(imageName, actualImg, showImg);
                    }

                    // 初始化Web Uploader
                    var uploader = WebUploader.create({

                        // 选完文件后，是否自动上传。
                        auto : true,

                        // swf文件路径
                        swf : '/shop/admin/js/upload-js/Uploader.swf',

                        // runtimeOrder: 'flash',

                        // 文件接收服务端。
                        server : '/api/base/upload-image/upload-image.do?subFolder=' + subFolder,

                        // 选择文件的按钮。可选。
                        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                        pick : '#filePicker_' + uploaderName,

                        fileSizeLimit : fileSizeLimit,
                        // 只允许选择图片文件。
                        accept:{
                            title:'Images',
                            extensions:'gif,jpg,jpeg,bmp,png',
                            mimeTypes:'image/gif,image/jpg,image/jpeg,image/bmp,image/png'
                        }
                    });

                    uploader.on("uploadSuccess", function(file, data) {
                        //
                        if (data.result == 1) {
                            data = data.data;
                            createHtml(imageName, data.img, data.img, file.id);
                        } else {

                        }
                    });

                    // 文件添加队列之前
                    uploader.on("beforeFileQueued", function(file) {
                        // 如果数量等于限制数量
                        console.log('列队之前' + nowImgNum)
                        if (nowImgNum >= fileNumLimit) {
                            alert("超出限制上传数量");
                            return false;
                        }
                        console.log('添加到列队之前：' + nowImgNum)
                        nowImgNum++;
                        console.log('添加到列队之后：' + nowImgNum)
                    });

                    uploader.on("error", function(type) {
                        if (type == "Q_EXCEED_NUM_LIMIT") {
                            alert("超出最大张数");
                        }else if (type == "F_DUPLICATE") {
                            alert("文件重复");
                        }else if (type == "Q_EXCEED_SIZE_LIMIT") {
                            alert("超出限制大小");
                        }
                        nowImgNum = nowImgNum < 1 ? 0 : nowImgNum - 1;
                    });
                    $("#sortable_" + uploaderName).sortable({
                        revert : true
                    });

                    // $(document).on 这种方式绑定事件 可以对后添加的html元素生效
                    $(document).on("click", ".delete-image",function() {
                        console.log('之前：' + nowImgNum)
                        nowImgNum = nowImgNum < 1 ? 0 : nowImgNum - 1;
                        console.log('之后：' + nowImgNum)
                        var $this = $(this);
                        var $liItem = $this.parent().parent().parent();
                        var fsImg = $this.attr("fsimg");
                        var imgId = $this.attr("imgid");
                        var delIndex;
                        for ( var index in nowImgs) {
                            var img = nowImgs[index];
                            if (img.id == imgId) {
                                delIndex = index;
                            }
                        }
                        // 如果有，则删除
                        if (delIndex) {
                            var endIndex = delIndex;
                            if (endIndex == 0) {
                                endIndex = endIndex + 1;
                            }
                            nowImgs.splice(delIndex, endIndex);
                        }

                        $(".delete-imgs").append("<input type=\"hidden\" name=\"del_pic\" value=\"" + fsImg + "\" />");
                        $liItem.remove();

                        //通过html来判断是否有这个元素 有就是还有图片 不隐藏封面logo
                        if (!$(".toolbar").html()) {
                            $(".first_icon").hide();
                        }

                        // 通过id 得到file
                        var fileId = $this.attr("fileid");

                        if (fileId) {
                            var file = uploader.getFile(fileId);
                            uploader.removeFile(file);
                        }
                    })

                    // 上传的文件鼠标移入事件
                    $(document).on("mouseenter", ".img_box", function() {
                        var $this = $(this);
                        $this.addClass("img_box_hover");
                        $this.find(".toolbar_wrap").show();
                    });

                    // 上传的文件鼠标移出事件
                    $(document).on("mouseleave", ".img_box", function() {
                        var $this = $(this);
                        $this.removeClass("img_box_hover");
                        $this.find(".toolbar_wrap").hide();
                    });

                    // 上传文件按钮鼠标移入
                    $(document).on("mouseenter", ".localUpload", function() {
                        $(this).addClass("local_hover");
                    });

                    // 上传文件按钮鼠标移出
                    $(document).on("mouseleave", ".localUpload", function() {
                        $(this).removeClass("local_hover");
                    });

                    //  修复使用flash时，上传object元素宽高不够引起的按钮无效问题
                    $('#filePicker_' + uploaderName).find('object').css('position', 'relative')
                    $('#filePicker_' + uploaderName).find('object').parent().css({
                        width : 96,
                        height : 90,
                        top : 0,
                        left : 0
                    });
                })
            </script>
            <style>
                .imgbar_wrap .img_list {
                    margin-left: 0;
                }

                .imgbar_wrap .img_list .first_icon {
                    background: url(http://img.58cdn.com.cn/ui7/post/pc/imgs/icons_edit.png);
                    background-position: -465px 0;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 27px;
                    height: 27px;
                    z-index: 9;
                    display: list-item;
                }

                .imgbar_wrap .img_list .img_box {
                    float: left;
                    text-align: center;
                    margin-right: 6px;
                    margin-bottom: 6px;
                    position: relative;
                }

                .imgbar_wrap .img_list .img_box img {
                    width: 130px;
                    cursor: move;
                }

                .imgbar_wrap .img_list .img_box .img_cover {
                    width: 130px;
                    cursor: move;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .upload_wrap .upload {
                    width: 100%;
                    height: 174px;
                    margin: 0;
                    position: relative;
                    overflow: hidden;
                }

                .upload_wrap .localUpload_wrap {
                    width: 194px;
                    height: 172px;
                    border: 1px solid #ececec;
                    float: left;
                    background-color: #fff;
                }

                .upload_wrap .localTitle {
                    height: 32px;
                    background-color: #f5f5f5;
                    border-bottom: 1px solid #ececec;
                    padding: 0 12px;
                    line-height: 32px;
                    font-size: 14px;
                    color: #9a9a9a;
                }

                .upload_wrap .localUpload {
                    background-image:
                            url(http://img.58cdn.com.cn/ui7/post/pc/imgs/icons_edit.png);
                    background-position: -106px 0;
                    width: 99px;
                    height: 90px;
                    margin: 30px auto 0;
                }

                .upload_wrap .localUpload .imgUpload, .upload_wrap .localUpload .imgUpload input
                {
                    width: 96px;
                    height: 90px;
                    opacity: 0;
                    cursor: pointer;
                }

                .upload_wrap .localUpload .imgUpload, .upload_wrap .localUpload .imgUpload input
                {
                    cursor: pointer;
                }

                .upload_wrap .localUpload .imgUpload, .upload_wrap .localUpload .imgUpload input
                {
                    width: 96px;
                    height: 90px;
                    opacity: 0;
                    cursor: pointer;
                }

                .clearfix {
                    display: block;
                    list-style: none;
                }

                .imgbar_wrap .img_list .img_box .toolbar {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    width: 100%;
                    height: 20px;
                    z-index: 109;
                }

                .imgbar_wrap .img_list .img_box .opacity {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    width: 100%;
                    height: 20px;
                    background-color: #000;
                    opacity: .3;
                    z-index: 108;
                    _filter: alpha(opacity = 30);
                }

                .imgbar_wrap .img_list .img_box .toolbar a {
                    background-image:
                            url(http://img.58cdn.com.cn/ui7/post/pc/imgs/icons_edit.png);
                    position: absolute;
                    outline: 0;
                    text-decoration: none;
                }

                .imgbar_wrap .img_list .img_box .toolbar .edit {
                    background-image:
                            url(http://img.58cdn.com.cn/ui7/post/pc/imgs/icons_edit.png);
                    background-position: -229px -189px;
                    width: 20px;
                    height: 20px;
                    top: 0;
                    right: 22px;
                }

                .imgbar_wrap .img_list .img_box .toolbar .delete {
                    background-image:
                            url(http://img.58cdn.com.cn/ui7/post/pc/imgs/icons_edit.png);
                    background-position: -180px -92px;
                    width: 20px;
                    height: 20px;
                    top: 0;
                    right: 0;
                }

                /*自定义*/
                .toolbar_wrap {
                    display: none;
                }

                .upload_wrap .local_hover {
                    background-position: -233px 0;
                }

                .webuploader-element-invisible {
                    position: absolute !important;
                    clip: rect(1px, 1px, 1px, 1px);
                }
            </style></div>
        <style>
            #spec-input {
                display: none
            }


            #spec-input .layui-table td,#spec-input .layui-table th{
                padding: 5px 15px;
            }

        </style>
        <link href="/shop/admin/css/spec/spec2.css" rel="stylesheet" type="text/css" />
        <script >
            var ctx="";
        </script>

        <script type="text/javascript" src="/shop/admin/js/spec/memberprice.js"></script>
        <script type="text/javascript" src="/statics/e_tools/mobile/library/lrz/lrz.bundle.js"></script>
        <script type="text/javascript" src="/shop/admin/js/spec/spec-v2.js"></script>
        <input type="hidden" name="haveSpec" id="haveSpec" value="0" />



        <div class="layui-form-item">
            <label class="layui-form-label">销售价</label>
            <div class="layui-input-block">
                <input type="text" name="price" id="price" lay-verify="required" autocomplete="off" value="0" placeholder="请输入销售价" class="layui-input w300" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">成本价</label>
            <div class="layui-input-block">
                <input type="text" name="cost" id="cost"  lay-verify="required" autocomplete="off" value="0" placeholder="请输入成本价" class="layui-input w300" >
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">重量</label>
            <div class="layui-input-block">
                <input type="text" name="cost" id="cost"  lay-verify="required" autocomplete="off" value="0" placeholder="请输入重量" class="layui-input w300" >
            </div>
            <div class="layui-form-mid layui-word-aux">克(g)</div>
        </div>

        <div class="layui-form-item advui no-spec-input">
            <label class="layui-form-label">规格</label>
            <div class="layui-input-block">
                <a class="layui-btn layui-btn-normal" id="specOpenBtn" >开启规格</a>
            </div>
        </div>

        <div id="spec-input" style="text-align: left;">
            <input type="button" id="specCloseBtn" value="关闭规格" goodsid="0" class="button" />
            <table class="form-table spec-form-table">
                <tbody>
                <tr>
                    <th>保障期限：</th>
                    <td>
                        <ul class="spec" specname="保障期限">
                            <li style="margin: 5px;">
                            <span>
                                <input class="chk" autocomplete="off" lay-ignore type="checkbox" value="79" spec_value="3个月" specid="6" specmemo=""/>
                            </span>
                                <span>
                                <input style="border:none;" type="text" class="change-spec-value" value="3个月" readonly>
                            </span>
                            </li>
                            <li style="margin: 5px;">
                            <span>
                                <input class="chk" autocomplete="off" lay-ignore type="checkbox" value="80" spec_value="6个月" specid="6" specmemo=""/>
                            </span>
                                <span>
                                <input style="border:none;" type="text" class="change-spec-value" value="6个月" readonly>
                            </span>
                            </li>
                            <li style="margin: 5px;">
                            <span>
                                <input class="chk" autocomplete="off" lay-ignore type="checkbox" value="81" spec_value="9个月" specid="6" specmemo=""/>
                            </span>
                                <span>
                                <input style="border:none;" type="text" class="change-spec-value" value="9个月" readonly>
                            </span>
                            </li>
                            <li style="margin: 5px;">
                            <span>
                                <input class="chk" autocomplete="off" lay-ignore type="checkbox" value="82" spec_value="一年" specid="6" specmemo=""/>
                            </span>
                                <span>
                                <input style="border:none;" type="text" class="change-spec-value" value="一年" readonly>
                            </span>
                            </li>
                        </ul>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="detail" >
                <table class="spec_table layui-table"  cellspacing="0" cellpadding="0" border="0" >
                    <thead>
                    <tr>
                        <th class="w2">货号*</th>
                        <th class="w2">销售价*</th>
                        <th class="w3">重量</th>
                        <th class="w3">成本价</th>
                        <th class="w1">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>

            <div class="image-update-box">

            </div>
        </div>

</body>
</html>